<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-23 17:35:06
 * @LastEditTime : 2020-02-20 16:14:20
 * @LastEditors  : Please set LastEditors
-->
<template>
    <div>
        <!-- <div class="header">
          <div class="leftP lf" style="font-size:16px;margin-left:15px">project:<span class="projectName">{{projectName}}</span></div>
          <div class="rightU rt">
              <span class="userName">{{userName}}</span>
              <img src="../../assets/userss.png" alt="" class="img_user">
          </div>
      </div> -->
        <div class="headerBtn1">
            <Poptip
                v-if="batch"
                confirm
                title="确认将选中的机器开机吗?"
                @on-ok="batchOnOff(1)"
                transfer
            >
                <Button
                    type="primary"
                    ghost
                    :disabled="disabledAllBtn"
                    style="margin-right: 15px; margin-bottom: 10px"
                    >批量开机</Button
                >
            </Poptip>
            <Poptip
                v-if="batch"
                confirm
                title="确认将选中的机器关机吗?"
                @on-ok="batchOnOff(0)"
                transfer
            >
                <Button
                    type="primary"
                    ghost
                    :disabled="disabledAllBtn"
                    style="margin-right: 15px; margin-bottom: 10px"
                    >批量关机</Button
                >
            </Poptip>
            <!--<Button type="primary"  ghost style="position:relative;z-index:55" @click="opeartionManyVm">批量操作虚拟机</Button>-->
            <Select filterable
                v-model="virtualSystypeOfReach"
                filterable
                style="width: 150px; margin-right: 15px; margin-bottom: 10px"
                clearable
                transfer
                placeholder="请选择操作系统类型"
                @on-change="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
            >
                <Option value="linux">Linux</Option>
                <Option value="windows">Windows</Option>
                <Option value="mac">Mac</Option>
                <Option value="unix">Unix</Option>
            </Select>
            <Select filterable
                v-model="virtualvmTypeOfReach"
                filterable
                style="width: 150px; margin-right: 15px; margin-bottom: 10px"
                clearable
                transfer
                placeholder="请选择虚拟机类型"
                @on-change="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
            >
                <Option value="VM">VM</Option>
                <Option value="SERVER">SERVER</Option>
                <Option value="CLIENT">CLIENT</Option>
                <Option value="DRT">DRT</Option>
                <Option value="IDS">IDS</Option>
                <Option value="DES">DES</Option>
                <Option value="WAF">WAF</Option>
                <Option value="FW">FIREWALL</Option>
                <Option value="PRT">PRT</Option>
                <Option value="TARGET">TARGET</Option>
                <Option value="TEST">TEST</Option>
                <Option value="FLAG">FLAG</Option>
            </Select>
            <Select filterable
                v-model="virtualNetworkIdOfReach"
                filterable
                style="width: 150px; margin-right: 15px; margin-bottom: 10px"
                clearable
                transfer
                placeholder="请选择子网络"
                @on-open-change="reachNetworkList"
                @on-change="
                    vmCurrentPage = 1;
                    getVmListManage();
                "
            >
                <Option
                    v-for="(item, index) in networkData"
                    :key="index"
                    :value="item.networkId"
                    :title="item.networkName"
                    >{{ item.networkName }}</Option
                >
            </Select>
            <Input
                placeholder="请输入虚拟机名称"
                v-model="virtualNameOfReach"
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="
                    width: 180px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                    position: relative;
                    z-index: 55;
                "
                v-show="controlSearchBtn"
            />
            <Input
                placeholder="请输入IP"
                v-model="virtualIPOfReach"
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="
                    width: 180px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                    position: relative;
                    z-index: 55;
                "
                v-show="controlSearchBtn"
            />
            <Input
                placeholder="请输入设备ID"
                v-model="equipmentId"
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="
                    width: 180px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                    position: relative;
                    z-index: 55;
                "
                v-show="controlSearchBtn"
            />
            <Input
                placeholder="请输入子网ID"
                v-model="subnetId"
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="
                    width: 180px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                    position: relative;
                    z-index: 55;
                "
                v-show="controlSearchBtn"
            />
            <!-- <Input suffix="ios-search" placeholder="Enter vmType"  v-model="virtualvmTypeOfReach"  @on-search="getVmListManage"  @on-change="getVmListManage" clearable @on-clear="getVmListManage" style="width: auto;position:relative;z-index:55"/> -->
            <Input
                placeholder="请输入Mac地址"
                v-model="virtualMacOfReach"
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="
                    width: 180px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                    position: relative;
                    z-index: 55;
                "
                v-show="controlSearchBtn"
            />
            <Input
                placeholder="请输入镜像名称"
                v-model="virtualImageNameOfReach"
                @on-change="
                    vmCurrentPage = 1;
                    limitingReach();
                "
                clearable
                style="
                    width: 180px;
                    margin-right: 15px;
                    margin-bottom: 10px;
                    position: relative;
                    z-index: 55;
                "
                v-show="controlSearchBtn"
            />
            <!-- <Input suffix="ios-search" placeholder="请输入Mac地址" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
          <Input suffix="ios-search" placeholder="请输入Mac地址" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
          <Input suffix="ios-search" placeholder="请输入Mac地址" search v-model="virtualMacOfReach"  @on-search="vmCurrentPage=1;getVmListManage()"  @on-change="vmCurrentPage=1;limitingReach()" clearable  style="width: auto;position:relative;z-index:55"/>
          <Cascader :data="vmAttributeData"    change-on-select @on-change="listenKeyChange" style="display:inline-block" placeholder="请选择key/value" @on-visible-change="getVmAttributeKey" v-show="controlSearchBtn"></Cascader>-->

            <!--<Select filterable v-model="virtualSubnetIdOfReach" filterable  style="width:180px;" clearable placeholder="请选择Subnet"  @on-open-change="reachSubnetList" @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
              <Option v-for="(item,index) in subnetData" :key="index" :value="item.id">{{item.name+'--'+item.cidr}}</Option>
          </Select>
          <Select filterable v-model="virtualSegmentIdOfReach" filterable  style="width:180px;" clearable placeholder="请选择Vlan"  @on-open-change="reachSegmentList" @on-change="vmCurrentPage=1;getVmListManage()" v-show="controlSearchBtn">
              <Option v-for="(item,index) in segmentsData" :key="index" :value="item.id">{{item.name}}</Option>
          </Select>
          <Button type="primary" ghost @click="vmCurrentPage=1;getVmListManage()" style="position:relative;z-index:55;margin-left:15px;">搜索</Button>-->
            <Button
                type="dashed"
                @click="controlSearch"
                :icon="controlSearchImage"
                style="margin-bottom: 10px"
                >{{ controlSearchText }}</Button
            >
            <!-- <Button type="primary" @click="taskConfigerMess = true"><Icon type="md-settings" :size="16" class="position_i"/>配置管理</Button> -->
        </div>
        <!-- <Card v-show="vmListDataTable.length ==  0" style="margin-top: -10px;"><p style="text-align:center;">没有查询到数据</p></Card> -->
        <Table
            border
            ref="selection1"
            :columns="vmColumnsData"
            :data="vmListDataTable"
            :stripe="true"
            :show-header="true"
            style="margin-top: -10px"
            id="vmListTable"
            :height="tableHeight"
            @on-selection-change="selectTableData"
            :loading="loadingTable"
            @on-select="test"
        ></Table>
        <!--<card-list :columns="vmColumnsData" :data="vmListDataTable"></card-list>-->
        <Page
            :total="vmTotal"
            :current="vmCurrentPage"
            :page-size="vmItemPage"
            :show-total="true"
            class-name="pageStyle1"
            @on-change="switchineVmCurrentPage"
            @on-page-size-change="switchVmItemPage"
            :page-size-opts="pageItemGroup"
        />
        <!-- 虚拟机元数据 -->
        <Modal
            v-model="vmMetadata"
            title="元数据"
            ok-canel="关闭"
            ok-text="确定"
            :loading="vmMetadataLoading"
            @on-cancel="cancel"
            @on-ok="SaveMetaData"
        >
            <Tag type="dot" color="primary">虚拟机：{{ vmName }}</Tag>
            <div
                v-for="(item, key) in metadataData"
                :key="key"
                style="margin: 5px 0px; text-align: left; position: relative; width: 101%"
            >
                <Input
                    placeholder="Enter key"
                    style="width: 226px"
                    v-model="item.key"
                    clearable
                ></Input>
                <Icon type="md-remove" />
                <Input
                    placeholder="Enter value"
                    style="width: 220px"
                    v-model="item.value"
                    clearable
                ></Input>
                <Icon
                    type="md-remove-circle"
                    @click="removeMetadata(key)"
                    :size="20"
                    style="cursor: pointer"
                />
            </div>
            <div>
                <Button icon="md-add" type="dashed" size="large" @click="handleAddMetadata"
                    >添加元数据</Button
                >
            </div>
        </Modal>
        <!-- 批量操作虚拟机面板 -->
        <Modal v-model="vmManyPanel" width="371">
            <p slot="header" style="text-align: left">
                <span>共选择了{{ vmManyNumber }}台虚拟机</span>
            </p>
            <div>
                <div>
                    <Poptip
                        v-for="(item, index) in btnData"
                        :key="index"
                        confirm
                        title="您确定要执行此操作吗?"
                        @on-ok="okVm(item)"
                        @on-cancel="cancel"
                    >
                        <Button type="primary" ghost style="margin: 5px">{{ item }}</Button>
                    </Poptip>
                </div>
            </div>
            <div slot="footer">
                <Button type="primary" @click="vmManyPanel = false">关闭</Button>
            </div>
        </Modal>
        <!-- 端口转发列表 -->
        <Modal v-model="portListPanel" width="1200">
            <p slot="header" style="font-size: 14px; text-align: left">
                <!-- <Icon type="ios-information-circle-outline"></Icon> -->
                <span>虚拟机：{{ vmName }}</span>
            </p>
            <div style="text-align: center">
                <div style="text-align: left; margin-bottom: 10px">
                    <Button type="primary" style="margin: 5px" @click="openPortPanel"
                        >开放端口</Button
                    >
                </div>
                <Table
                    border
                    ref="selection"
                    :columns="portTableCloums"
                    :data="portTableData"
                    :stripe="true"
                    :show-header="true"
                ></Table>
            </div>
            <div slot="footer">
                <Button type="primary" @click="portListPanel = false">关闭</Button>
            </div>
        </Modal>
        <!-- 转发端口 -->
        <Modal
            v-model="openPort"
            title="添加"
            ok-canel="关闭"
            ok-text="确定"
            width="380"
            :loading="addPortLoading"
            @on-cancel="cancel"
            @on-ok="addPort"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="类型" prop="type">
                    <RadioGroup v-model="formValidate.type" @on-change="listenTypeChange">
                        <Radio label="ssh"></Radio>
                        <Radio label="rdp"></Radio>
                        <Radio label="console">console</Radio>
                        <Radio label="other"></Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="other" prop="customType" v-if="disabledType">
                    <Input
                        v-model.trim="formValidate.customType"
                        style="width: 200px"
                        placeholder="请输入其他类型"
                    ></Input>
                </FormItem>
                <FormItem label="端口" prop="port">
                    <!-- <Input  type="number" min="1"  max="65535"  ></Input> -->
                    <InputNumber
                        :min="1"
                        :value="1"
                        :max="65534"
                        v-model="formValidate.port"
                        style="width: 200px"
                    ></InputNumber>
                </FormItem>
                <FormItem label="协议" prop="protocol">
                    <RadioGroup v-model="formValidate.protocol">
                        <Radio label="tcp">TCP</Radio>
                        <Radio label="udp" :disabled="disabledprototol">UDP</Radio>
                        <Radio label="icmp" :disabled="disabledprototol">ICMP</Radio>
                        <!-- <Radio label="all" :disabled="disabledprototol">ALL</Radio> -->
                    </RadioGroup>
                </FormItem>
            </Form>
            <!-- <Label>端口：</Label>
          <Input type="number"/>
          <Label>类型：</Label>
          <Select filterable>
              <Option>ssh</Option>
              <Option>rdp</Option>
              <Option>console</Option>
              <Option>console</Option>
          </Select> -->
        </Modal>
        <!-- 接入选择页面 -->
        <Modal
            v-model="selectDataPanel"
            title="选择接入的IP"
            ok-canel="关闭"
            ok-text="接入"
            width="380"
            :loading="selectDataPanelLoading"
            @on-cancel="cancel"
            @on-ok="vmAccessChage"
        >
            <div>
                <RadioGroup
                    v-model="accessVmIp"
                    v-for="(item, index) in selectDataGroup"
                    :key="index"
                    @on-change="changeIpAccess"
                >
                    <Radio :label="item.ip">{{ item.ip }}</Radio>
                </RadioGroup>
            </div>
        </Modal>
        <!-- 页面loading -->
        <Spin fix v-show="isSpinShow">
            <Icon type="load-c" size="30" class="demo-spin-icon-load"></Icon>
            <div>Loading...</div>
        </Spin>
        <!--修改密码-->
        <Modal
            v-model="passwordModal.show"
            title="修改密码"
            width="380"
            :loading="passwordModal.loading"
            @on-cancel="cancel"
            @on-ok="changePassword"
        >
            <div>
                密码：<Input
                    v-model.trim="vmPassword"
                    style="width: 200px"
                    placeholder="请输入密码"
                ></Input>
            </div>
        </Modal>
        <Modal
            v-model="vmOpModal.show"
            title="操作虚拟机"
            width="380"
            @on-cancel="cancel"
            @on-ok="vmSwitchTypeOp"
        >
            <div style="font-size: 14px">
                {{ vmOpModal.content }}
            </div>
        </Modal>
        <Modal
            v-model="toolModal"
            title="工具库"
            width="380"
            @ok="opTool(opType)"
            @on-cancel="toolModal = false"
        >
            <!-- {{toolDetail}} -->
            <div>
                <p>工具库状态：{{filterToolStatus()}}</p>
                <template v-if="toolDetail && toolDetail.status === 'running' && toolDetail.toolUrl">
                    <p>工具库地址：{{toolDetail.toolUrl}}</p>
                    <p>工具库账号：{{toolAcountInfo.name}}</p>
                    <p>工具库密码：{{toolAcountInfo.password}}</p>
                    <Divider style="margin:10px 0 "></Divider>
                    <WarningTip type="show" :content="`工具库将于开启后${toolkitOpenTime}小时后关闭`">
                    </WarningTip>
                </template>
            </div>
            <div slot="footer">
                <Button type="primary" @click="opTool('start')" :disabled="toolDetail && toolDetail.status === 'running'">开启</Button>
                <Button type="primary" @click="opTool('stop')" :disabled="!toolDetail || toolDetail.status !== 'running'">关闭</Button>
            </div>
        </Modal>
        <!-- <Modal
          v-model="createVmConfigModal"
          title="扩展和收缩策略配置"
          ok-text = "确定"
          :loading =createVmConfigModalLoading
          :mask-closable="false"
  
          @on-ok="ok"
          @on-cancel="cancel">
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改I/O优先级</span>
                  </Checkbox>
                  <RadioGroup v-model="formValidate.proto">
                      <Radio label="1">低</Radio>
                      <Radio label="2">中</Radio>
                      <Radio label="3">高</Radio>
                  </RadioGroup>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改启动优先级</span>
                  </Checkbox>
                  <Select filterable  v-model="virtualSystypeOfReach" filterable  style="width:180px;" clearable >
                      <Option value="linux">Linux</Option>
                      <Option value="windows">Windows</Option>
                      <Option value="mac">Mac</Option>
                      <Option value="unix">Unix</Option>
                  </Select>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改自动迁移</span>
                  </Checkbox>
                    <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改CPU调度优先级</span>
                  </Checkbox>
                  <RadioGroup v-model="formValidate.protocol">
                      <Radio label="tcp">低</Radio>
                      <Radio label="udp">中</Radio>
                      <Radio label="icmp">高</Radio>
                  </RadioGroup>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改CPU个数</span>
                  </Checkbox>
                  <InputNumber :max="10" :min="1" ></InputNumber>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改内存大小</span>
                  </Checkbox>
                  <InputNumber :max="10" :min="1" ></InputNumber>/MB
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改自动启动</span>
                  </Checkbox>
                   <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改启用console代理</span>
                  </Checkbox>
                   <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem>
              <FormItem label="" prop="">
                  <Checkbox label="twitter">
                      <span>修改tools自动升级</span>
                  </Checkbox>
                  <i-switch size="large">
                      <span slot="open">开启</span>
                      <span slot="close">关闭</span>
                  </i-switch>
              </FormItem> -->
        <!-- <FormItem label="参数" style="width:380px;">
                  <Select filterable clearable>
                      <Option value="1">CPU利用率</Option>
                      <Option value="2">内存</Option>
                      <Option value="3">连接数</Option>
                      <Option value="4">磁盘IO</Option>
                  </Select>
              </FormItem>
              <FormItem label="" prop="" style="display:inline-block;margin-top:120px;"><span>小于</span><InputNumber :max="10" :min="1" ></InputNumber>%<span style="margin:0px 10px">收缩到</span><InputNumber :max="10" :min="1" ></InputNumber><span>个</span></FormItem>
              <FormItem label="" prop="" style="display:inline-block;">
                  <span>大于</span><InputNumber :max="10" :min="1" ></InputNumber>%<span style="margin:0px 10px">扩展到</span><InputNumber :max="10" :min="1" ></InputNumber><span>个</span>
              </FormItem> -->
        <!-- </Form>
      </Modal> -->
    </div>
</template>

<script>
import { queryAllRange } from '../../api/resource.js';
import { startToolTunnel, stopToolTunnel, getToolTunnelDetail} from '../../api/content.js'
import { getToolAccount } from '@/api/tool-manage.js' 
//   import CardList from '@/view/drill_compete/cardList/cardList'
import axios from '@/libs/axios1';
// import $ from 'jquery';
import cookieUse from '@/libs/cookie.js';
import { opVms } from '@/api/remote.js';
import { getDictInfoByName } from '@/api/dict.js'
import { mapState } from 'vuex';
import { taskMixin } from '../task/taskMixin.js'
//   import commonFun from '../mixin.js'
export default {
    name: 'vmManagement',
    //   mixins:[commonFun],
    mixins:[taskMixin],
    //   components:{CardList},
    computed: {
        ...mapState(['cloudType']),
    },
    props: {
        batch: {
            type: Boolean,
            default: false,
        },
        disabledAllBtn: {
            type: Boolean,
            default: false,
        },
        prjId:{
            type:String,
            default:''
        }
    },
    data() {
        return {
            toolModal:false,//工具库
            pageItemGroup: [10, 20, 30, 40],
            isSpinShow: false,
            loadingTable: true,
            vmManyPanel: false,
            vmManyNumber: '',
            vmName: '',
            vmMetadata: false,
            vmMetadataLoading: true,
            metadataData: [
                {
                    key: '',
                    value: '',
                },
            ],
            currentProjectId: '',
            projectName: '',
            userName: '',
            vmTotal: 0,
            vmCurrentPage: 1,
            vmItemPage: 10,
            vmColumnsData: [
                // {
                //     type: 'expand',
                //     width: 60,
                //     align: 'center',
                //     //  "fixed": "left",
                //     render:(h,params)=>{
                //         let _this = this;
                //         params = params.row;
                //         let addresses = [];
                //         if(params.addresses){
                //             if(params.addresses.length!=0){
                //                 addresses = params.addresses.map((item)=>{
                //                     return h('div',{
                //                         style:{
                //                             // borderBottom:'1px dotted #ddd',
                //                             // paddingBottom:'10px'
                //                         }
                //                     },[
                //                         h('Divider',{},'网络信息'),
                //                         h('Span',{class:['expendSpanStyle']},[h('Label',{style:{display:'inline-block',minWidth:'50px',borderRadius:'5px',background:'#57a3f3',color:'#fff',textAlign:'center'}},'CIDR：'),item.cidr]),
                //                         h('Span',{class:['expendSpanStyle']},'portId：'+item.id),
                //                         h('Span',{class:['expendSpanStyle']},'IP：'+item.ip),
                //                         h('Span',{class:['expendSpanStyle']},'Mac：'+item.mac),
                //                         h('Span',{class:['expendSpanStyle']},'subnetId：'+item.subnetId),
                //                         h('Span',{class:['expendSpanStyle']},'subnetOsId：'+item.subnetOsId),
                //                         h('Span',{class:['expendSpanStyle']},'version：'+item.version),
                //                         h('Span',{class:['expendSpanStyle']},'vlan：'+item.vlan)
                //                     ])

                //                     // return h()
                //                 })
                //             }
                //         }
                //         addresses.push(
                //             h('div',{
                //                 style:{
                //                     // borderBottom:'1px dotted #ddd',
                //                     // paddingBottom:'10px'
                //                 }
                //             },[
                //                 h('Divider',{},'宿主机信息'),
                //                 h('Span',{class:['expendSpanStyle']},'instance：'+params.instance),
                //                 h('Span',{class:['expendSpanStyle']},'host：'+params.host),
                //                 h('Span',{class:['expendSpanStyle']},'hostIp：'+params.hostIp),
                //                 h('Span',{class:['expendSpanStyle']},'osId：'+params.osId),
                //                 h('Span',{class:['expendSpanStyle']},'zone：'+params.zone),
                //                 h('Span',{class:['expendSpanStyle']},'imageId：'+params.imageId),
                //                 h('Span',{class:['expendSpanStyle']},'flavorId：'+params.flavorId)
                //             ]),
                //             h('div',{
                //                 style:{
                //                     // borderBottom:'1px dotted #ddd',
                //                     // paddingBottom:'10px'
                //                 }
                //             },[
                //                 h('Divider',{},'资源信息'),
                //                 h('Span',{class:['expendSpanStyle']},'CPU：'+params.cpu),
                //                 h('Span',{class:['expendSpanStyle']},'DISK：'+params.disk),
                //                 h('Span',{class:['expendSpanStyle']},'RAM：'+params.ram),
                //             ])
                //         )
                //         return h('div',{style:{textAlign:'left'}},addresses)
                //     }
                // },
                //              {
                //                  type: 'selection',
                //                  width: 60,
                //                  align: 'center',
                //                  "fixed": "left",
                //              },
                {
                    title: '设备ID',
                    key: 'id',
                    align: 'center',
                    sortable: true,
                    minWidth: 120,
                    fixed: 'left',
                    placement: 'top-left',
                    tooltip:true
                },
                {
                    title: '虚拟机名称',
                    key: 'name',
                    align: 'center',
                    sortable: true,
                    minWidth: 120,
                    fixed: 'left',
                    placement: 'top-left',
                    // render:(h,params)=>{
                    // }
                },
                {
                    title: '子网络名称',
                    key: 'networkName',
                    align: 'center',
                    // sortable: true,
                    minWidth: 120,
                    fixed: 'left',
                    // render:(h,params)=>{
                    // }
                },
                {
                    title: '网络详细信息',
                    key: '',
                    align: 'center',
                    // render:(h,params)=>{

                    // },
                    // minWidth:700,
                    children: [
                        {
                            title: 'CIDR',
                            key: '',
                            align: 'center',
                            minWidth: 200,
                            render: (h, params) => {
                                let _this = this;
                                // let k = 0;
                                // _this.refreshIndex++;
                                // if(_this.refreshIndex>_this.vmListDataTable.length){
                                //     return;
                                // }
                                // if(this.refreshIndex>10){
                                //     return
                                // }

                                params = params.row;
                                let addresses = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        addresses = params.addresses.map((item) => {
                                            let cidr = item.ips.map((ip) => {
                                                return h('div', {}, ip.cidr);
                                            });
                                            return h('div', {}, cidr);
                                        });
                                    }
                                }
                                return h('div', {}, addresses);
                            },
                        },
                        {
                            title: 'IP',
                            key: '',
                            align: 'center',
                            sortable: true,
                            minWidth: 200,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let addresses = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        addresses = params.addresses.map((item) => {
                                            //                                          return h('div',{},item.ip);
                                            let ips = item.ips.map((ip) => {
                                                return h('div', {}, ip.ipAddress);
                                            });
                                            return h('div', {}, ips);
                                        });
                                        return h('div', {}, addresses);
                                    }
                                }
                            },
                        },
                        {
                            title: '子网ID',
                            key: '',
                            align: 'center',
                            sortable: true,
                            minWidth: 200,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let submitId = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        submitId = params.addresses.map((item) => {
                                            //                                          return h('div',{},item.ip);
                                            let subnetIds = item.ips.map((ip) => {
                                                return h('div', {}, ip.subnetId);
                                            });
                                            return h('div', {}, subnetIds);
                                        });
                                        return h('div', {}, submitId);
                                    }
                                }
                            },
                        },
                        {
                            title: 'Mac地址',
                            key: '',
                            align: 'center',
                            minWidth: 200,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let addresses = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        addresses = params.addresses.map((item) => {
                                            return h('div', {}, item.macAddress);
                                        });
                                        return h('div', {}, addresses);
                                    }
                                }
                            },
                        },
                        {
                            title: 'IP 版本',
                            key: '',
                            align: 'center',
                            minWidth: 200,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let addresses = [];
                                if (params.addresses) {
                                    if (params.addresses.length != 0) {
                                        addresses = params.addresses.map((item) => {
                                            //                                          return h('div',{},item.version);
                                            let ipVersion = item.ips.map((ip) => {
                                                return h('div', {}, ip.ipVersion);
                                            });
                                            return h('div', {}, ipVersion);
                                        });
                                        return h('div', {}, addresses);
                                    }
                                }
                            },
                        },
                    ],
                },
                {
                    title: '接入信息',
                    key: 'AccessInformation',
                    align: 'center',
                    minWidth: 600,
                    children: [
                        {
                            title: '用户名',
                            key: 'ausernamege',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                // params.accesses.push('gggg')
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.username);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                        {
                            title: '密码',
                            key: 'password',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.password);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                        {
                            title: '接入类型',
                            key: 'accessType',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.accessType);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                        {
                            title: '密码类型',
                            key: 'plugInType',
                            align: 'center',
                            minWidth: 150,
                            render: (h, params) => {
                                // let k = 0;
                                // if(k>10){
                                //     return;
                                // }
                                let _this = this;
                                params = params.row;
                                let userNameGroup = [];
                                if (params.accesses) {
                                    if (params.accesses.length != 0) {
                                        userNameGroup = params.accesses.map((item) => {
                                            return h('div', {}, item.plugInType);
                                        });
                                    }
                                }
                                return h('div', {}, userNameGroup);
                            },
                        },
                    ],
                },
                // {
                //     title:'IP',
                //     key:'',
                //     align: 'center',
                //     sortable: true,
                //     minWidth:120,
                //     // "fixed": "left",
                //     render:(h,params)=>{
                //         let _this = this;
                //         let _IPGroup = [];
                //         params = params.row;
                //         if(params.addresses){
                //             _IPGroup = params.addresses.map(item=>{
                //                 return h('p',{},item.ip)
                //             })
                //         }
                //         return h('div',{},_IPGroup)
                //     }
                // },
                {
                    title: '操作系统类型',
                    key: 'sysType',
                    minWidth: 150,
                    align: 'center',
                    filters: [
                        {
                            label: 'Linux',
                            value: 'linux',
                        },
                        {
                            label: 'Windows',
                            value: 'windows',
                        },
                        {
                            label: 'Mac',
                            value: 'mac',
                        },
                        {
                            label: 'Unix',
                            value: 'unix',
                        },
                    ],
                    filterMethod(value, row) {
                        // this.virtualSystypeOfReach = value;
                        // this.getVmListManage();
                        return row.sysType == value;
                    },
                },
                {
                    title: '镜像名称',
                    key: 'imageName',
                    minWidth: 150,
                    align: 'center',
                    tooltip:true
                },
                {
                    title: '主机信息',
                    key: '',
                    align: 'center',
                    // minWidth:700,
                    children: [
                        {
                            title: '主机',
                            key: 'host',
                            align: 'center',
                            minWidth: 150,
                        },
                        {
                            title: '主机IP',
                            key: 'hostIp',
                            align: 'center',
                            sortable: true,
                            minWidth: 150,
                        },
                    ],
                },
                {
                    title: '资源信息',
                    key: '',
                    align: 'center',
                    // minWidth:700,
                    children: [
                        {
                            title: 'CPU',
                            key: 'cpu',
                            sortable: true,
                            align: 'center',
                            minWidth: 120,
                        },
                        {
                            title: 'DISK(/GB)',
                            key: 'disk',
                            sortable: true,
                            align: 'center',
                            minWidth: 120,
                        },
                        {
                            title: 'RAM(/MB)',
                            key: 'ram',
                            sortable: true,
                            align: 'center',
                            minWidth: 120,
                        },
                    ],
                },

                {
                    title: '虚拟机类型',
                    key: 'vmType',
                    minWidth: 100,
                    align: 'center',
                },
                {
                    title: '虚拟化类型',
                    key: 'vzType',
                    minWidth: 100,
                    align: 'center',
                    filters: [
                        {
                            label: 'kvm',
                            value: 'kvm',
                        },
                        {
                            label: 'docker',
                            value: 'docker',
                        },
                    ],
                    filterMultiple: false,
                    filterMethod(value, row) {
                        if (value == 'kvm') {
                            return row.vzType == 'kvm';
                        } else if (value == 'docker') {
                            return row.vzType == 'docker';
                        } else {
                        }
                    },
                },

                {
                    title: '创建时间',
                    key: 'created',
                    align: 'center',
                    sortable: true,
                    minWidth: 150,
                },
                {
                    title: '接入',
                    key: '2',
                    align: 'center',
                    width: 180,
                    fixed: 'right',
                    action: true,
                    placement: 'top-right',
                    render: (h, params) => {
                        // let k = 0;
                        // if(k>10){
                        //     return;
                        // }
                        let _this = this;
                        params = params.row;
                        let accessGroup = [];
                        if (params.accesses) {
                            if (params.accesses.length != 0) {
                                accessGroup = params.accesses.map((item) => {
                                    if (item.accessType == 'console') {
                                        return 'console';
                                    } else {
                                        return item.accessType;
                                    }
                                });
                            }
                        }
                        accessGroup.push('console');
                        function dedupe(array) {
                            return Array.from(new Set(array));
                        }
                        accessGroup = dedupe(accessGroup);
                        let SelectGroup = [];
                        SelectGroup = accessGroup.map((element, index) => {
                            if (index == 0) {
                                return;
                            }
                            return h(
                                'Option',
                                {
                                    props: {
                                        value: element,
                                    },
                                },
                                element
                            );
                        });
                        SelectGroup.unshift(
                            h(
                                'Option',
                                {
                                    props: {
                                        value: '0',
                                    },
                                    class: ['emptyAccess'],
                                    style: {
                                        display: 'none',
                                    },
                                },
                                ''
                            )
                        );
                        return h(
                            'div',
                            {
                                class: ['accessType'],
                            },
                            [
                                h(
                                    'Icon',
                                    {
                                        props: {
                                            type: 'md-refresh',
                                        },
                                        attrs: {
                                            title: '刷新接入连接',
                                        },
                                        on: {
                                            click(event) {
                                                _this.loadingTable = true;
                                                _this.deleteAccessAisle(params.id);
                                            },
                                        },
                                        style: {
                                            fontSize: '20px',
                                            marginRight: '10px',
                                            cursor: 'pointer',
                                        },
                                    },
                                    ''
                                ),
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            label: '000',
                                            disabled: params.rangeId != this.selfRange.id,
                                            // loading:true
                                        },
                                        // label:'222',
                                        on: {
                                            click(evt) {
                                                // var event = event || window.event
                                                // e = window.event || even;
                                                // target = event.target || event.srcElement;
                                                let e = window.event || evt;
                                                // var e = evt.srcElement || evt.target;
                                                // e = window.event || arguments.callee.caller.arguments[0];
                                                // let versonGroup = [];
                                                // if(!event.toElement){

                                                // }
                                                // event.toElement = e.toElement || event.relatedTarget
                                                _this.selectDataGroup = [];
                                                _this.accessVmType = e.srcElement.innerText;
                                                _this.accessVmId = params.id;
                                                _this.accessVmIp = '';
                                                let addresses = params.addresses || [];
                                                for (
                                                    let index = 0;
                                                    index < addresses.length;
                                                    index++
                                                ) {
                                                    if (addresses[index].version == 4) {
                                                        _this.selectDataGroup.push(
                                                            addresses[index]
                                                        );
                                                    }
                                                }
                                                if (_this.selectDataGroup.length > 1) {
                                                    if (
                                                        e.srcElement.innerText == 'ssh' ||
                                                        e.srcElement.innerText == 'rdp'
                                                    ) {
                                                        _this.selectDataPanel = true;
                                                    } else {
                                                        _this.loadingTable = true;
                                                        _this.vmAccess(
                                                            params.id,
                                                            e.srcElement.innerText
                                                        );
                                                    }
                                                } else {
                                                    _this.loadingTable = true;
                                                    _this.vmAccess(
                                                        params.id,
                                                        e.srcElement.innerText
                                                    );
                                                }
                                            },
                                        },
                                        style: {
                                            borderRadius: '4px 0px 0px 4px',
                                        },
                                    },
                                    accessGroup[0]
                                ),
                                h(
                                    'Select',
                                    {
                                        props: {
                                            placeholder: '',
                                            transfer: true,
                                            disabled:
                                                accessGroup.length == 1 ||
                                                params.rangeId != this.selfRange.id,
                                        },
                                        style: {
                                            width: '20px',
                                        },
                                        on: {
                                            'on-change': (value) => {
                                                // $('.emptyAccess').click();
                                                if (value != 0) {
                                                    _this.vmAccess(params.id, value);
                                                }
                                                // $('.accessType .ivu-select-placeholder').text('');
                                            },
                                        },
                                    },
                                    SelectGroup
                                ),
                            ]
                        );
                    },
                },
                {
                    title: '操作',
                    key: '',
                    align: 'center',
                    minWidth: 130,
                    fixed: 'right',
                    action: true,
                    placement: 'top-right',
                    render: (h, params) => {
                        // let k = 0;
                        // if(k>10){
                        //     return;
                        // }
                        let _this = this;
                        params = params.row;
                        // let statusVm = params.status;
                        let statusVm = '';
                        if (_this.vmGroupStatus.length != 0) {
                            _this.vmGroupStatus.forEach((element) => {
                                if (element.id == params.id) {
                                    if (element.enableCrash) {
                                        statusVm = 'MELT';
                                    } else {
                                        statusVm = element.status;
                                        //  statusVm = "MELT"
                                    }
                                }
                            });
                        }

                        // let statusVm = _this.vmGroupStatus[_this.vmIdGroupStatus.findIndex(params.id)]
                        let operationGroup = [];
                        let operationOption = [];
                        let arr = [];
                        // if (this.optionConfig.show) {
                        //     arr = this.getoption();
                        // }

                        switch (statusVm) {
                            case 'ACTIVE':
                                operationGroup = ['关机', '重启', '重置', '挂起', '暂停', '密码','工具库'];
                                if (arr.length > 0) {
                                    operationGroup.push(...arr);
                                }
                                break;
                            case 'Running':
                                operationGroup = ['关机', '重启', '重置', '挂起', '暂停', '密码'];
                                if (arr.length > 0) {
                                    operationGroup.push(...arr);
                                }
                                break;
                            case 'SHUTOFF':
                                operationGroup = ['开机', '重置', '密码'];
                                if (arr.length > 0) {
                                    operationGroup.push(...arr);
                                }
                                break;
                            case 'DOWN':
                                operationGroup = ['开机', '重置'];
                                break;
                            case 'Stopped':
                                operationGroup = ['开机', '重置'];
                                break;
                            case 'SUSPENDED':
                                operationGroup = ['恢复', '密码'];
                                if (arr.length > 0) {
                                    operationGroup.push(...arr);
                                }
                                break;
                            case 'ERROR':
                                operationGroup = ['重启', '重置状态'];
                                break;
                            case 'PAUSED':
                                operationGroup = ['取消暂停', '密码'];
                                if (arr.length > 0) {
                                    operationGroup.push(...arr);
                                }
                                break;
                            case 'CRUSH': //虚拟机奔溃状态
                                operationGroup = ['关机', '重启'];
                                break;
                            case 'PASSWORD': //虚拟机未知状态
                                operationGroup = ['关机'];
                                break;
                            case 'MELT': //虚拟机奔溃状态
                                operationGroup = ['重启', '重置'];
                                break;
                            default:
                                operationGroup = ['关机'];
                                break;
                        }

                        //                      operationGroup.unshift("操作")
                        operationOption = operationGroup.map((item, index) => {
                            if (index == 0) {
                                return h(
                                    'Option',
                                    {
                                        props: { value: 0, label: 0 },
                                        class: ['falseValue' + params.id],
                                        style: { display: 'none' },
                                    },
                                    ''
                                );
                            } else {
                                return h('Option', { 
                                    props: { value: item } ,
                                    nativeOn:{
                                        click:() =>{
                                            if (
                                                item == '密码' ||
                                                item == '元数据' ||
                                                item == '端口转发' || item == '工具库'
                                                ) {
                                                    _this.vmSwitchTypeOperation(
                                                        params.id,
                                                        item,
                                                        params
                                                    );
                                                } else {
                                                    _this.opVm = params;
                                                    _this.opVmType = item;
                                                    _this.vmOpModal.show = true;
                                                    _this.vmOpModal.content = `确认对该虚拟机进行[${item}]操作吗?`;
                                                }
                                        }
                                    }
                                }, item);
                            }
                        });
                        return h(
                            'div',
                            {
                                class: ['opertionVm'],
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            disabled: params.rangeId != this.selfRange.id,
                                        },
                                        on: {
                                            click:(event) => {
                                                //window.openTrain("/TopoLeftFeatures/index.html#/vmHardwareCollectInfo?vmId="+params.id+'&projectId='+_this.currentProjectId);
                                                // _this.vmSwitchTypeOperation(params.id,event.toElement.innerText)
                                                let value = operationGroup[0];
                                                if (
                                                    value == '密码' ||
                                                    value == '元数据' ||
                                                    value == '端口转发' || value == '工具库'
                                                ) {
                                                    _this.vmSwitchTypeOperation(
                                                        params.id,
                                                        value,
                                                        params
                                                    );
                                                } else {
                                                    //                                  	_this.vmSwitchTypeOperation(params.id,value,params)
                                                    _this.opVm = params;
                                                    _this.opVmType = value;
                                                    _this.vmOpModal.show = true;
                                                    _this.vmOpModal.content = `确认对该虚拟机进行[${value}]操作吗?`;
                                                }
                                            },
                                        },
                                        style: {
                                            borderRadius: '4px 0px 0px 4px',
                                        },
                                    },
                                    operationGroup[0]
                                ),
                                h(
                                    'Select',
                                    {
                                        props: {
                                            placeholder: '',
                                            value: 0,
                                            transfer: true,
                                            disabled:
                                                operationGroup.length == 1 ||
                                                params.rangeId != this.selfRange.id
                                        },
                                        style: {
                                            width: '20px',
                                        },
                                        class: ['vm-op-wrap']
                                    },
                                    operationOption
                                ),
                            ]
                        );
                    },
                },
                {
                    title: '虚拟机状态',
                    key: 'status',
                    align: 'center',
                    minWidth: 130,
                    fixed: 'right',
                    placement: 'top-right',
                    render: (h, params) => {
                        // let k = 0;
                        // k++;
                        // if(k>this.vmListDataTable.length){
                        //     return;
                        // }
                        let _this = this;
                        params = params.row;
                        let statusVm = '',
                            fontColor = '',
                            statusLoading = false,
                            ErrorMesage = '';
                        if (_this.vmGroupStatus.length != 0) {
                            _this.vmGroupStatus.forEach(function (element,i) {
                                if (element.id == params.id) {
                                    if (element.enableCrash) {
                                        statusVm = 'MELT';
                                        ErrorMesage = element.crashMsg;
                                    } else {
                                        statusVm = element.status;
                                        ErrorMesage = '';
                                        // statusVm  =  "MELT";
                                    }
                                    statusLoading = element.loading;
                                    return;
                                }
                            });
                            // _this.vmGroupStatus.forEach(element => {
                            //     if(element.id==params.id){
                            //         statusVm  =  element.status;
                            //         statusLoading = element.loading
                            //     }
                            // });
                        }
                        // let statusVmGroup = [
                        //     {'ACTIVE':'运行中/#43CD80/false'},{'Running':'运行中/#43CD80/false'},{'SHUTOFF':'已关机/#f00/false'},
                        //     {'DOWN':'已关机/#f00/false'},{'Stopped':'已停止/#f00/false'},{'SUSPENDED':'已挂起/#f00/false'},
                        //     {'ERROR':'运行ERROR/#f00/false'},{'PAUSED':'已暂停/#43CD80/false'},{'CRUSH':'运行ERROR/#f00/false'},
                        //     {'UNKNOWN':'运行ERROR/#f00/false'},{'powering-off':'关机中/#57a3f3/true'},{'powering-on':'启动中/#57a3f3/true'},
                        //     {'rebuilding':'重置中/#57a3f3/true'},{'rebooting-hard':'重启中/#57a3f3/true'},{'supending':'挂起中/#57a3f3/true'},
                        //     {'resuming':'恢复中/#57a3f3/true'},{'pausing':'暂停中/#57a3f3/true'},{'unpausing':'启动中/#57a3f3/true'},
                        // ]
                        let statusVmGroup = {
                            ACTIVE: '运行中/#43CD80/false/alRunning.png',
                            Running: '运行中/#43CD80/false/alRunning.png',
                            SHUTOFF: '已关机/#f00/false/alOff.png',
                            DOWN: '已关机/#f00/false/alOff.png',
                            Stopped: '已停止/#f00/false/alStop.png',
                            SUSPENDED: '已挂起/#f00/false/alSuspend.png',
                            ERROR: '运行ERROR/#f00/false/runningError.png',
                            PAUSED: '已暂停/#43CD80/false/alPause.png',
                            CRUSH: '运行ERROR/#f00/false/runningError.png',
                            UNKNOWN: '运行ERROR/#f00/false/runningError.png',
                            'powering-off': '关机中/#57a3f3/true',
                            'powering-on': '启动中/#57a3f3/true',
                            rebuilding: '重置中/#57a3f3/true',
                            rebooting_hard: '重启中/#57a3f3/true',
                            suspending: '挂起中/#57a3f3/true',
                            resuming: '恢复中/#57a3f3/true',
                            pausing: '暂停中/#57a3f3/true',
                            unpausing: '启动中/#57a3f3/true',
                            MELT: '已崩溃/#f00/false/runningError.png',
                        };
                        if (!statusVmGroup[statusVm]) {
                            statusVmGroup[statusVm] = '加载中/#808695/true';
                        }
                        let _iamgeName =
                            statusVmGroup[statusVm].split('/')[2] == 'false'
                                ? './static/' + statusVmGroup[statusVm].split('/')[3]
                                : '';

                        // let _loading = statusVmGroup[statusVm].split('/')[2] =="false" ? false :true;
                        return h(
                            'div',
                            {
                                style: {
                                    color: statusVmGroup[statusVm].split('/')[1],
                                },
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'default',
                                            // color:'default',
                                            loading:
                                                statusVmGroup[statusVm].split('/')[2] == 'false'
                                                    ? false
                                                    : true,
                                            // loading:false
                                        },
                                        attrs: {
                                            title: ErrorMesage,
                                        },
                                    },
                                    [
                                        //                      	h('Img',{
                                        //                      	    attrs:{src:_iamgeName},
                                        //	                        	style:{
                                        //	                        		position:'relative',
                                        //	                        		bottom:'1px',
                                        //	                        		right:'8px'
                                        //	                        	}
                                        //                      	}),
                                        h(
                                            'span',
                                            {
                                                style: {
                                                    color: statusVmGroup[statusVm].split('/')[1],
                                                },
                                            },
                                            statusVmGroup[statusVm].split('/')[0]
                                        ),
                                    ]
                                ),
                            ]
                        );
                    },
                },
            ],
            vmListDataTable: [],
            tableHeight: '',
            virtualNameOfReach: '',
            virtualIPOfReach: '',
            subnetId: '',
            equipmentId: '',
            virtualSystypeOfReach: '',
            virtualKeyOfReach: '',
            virtualValueOfReach: '',
            virtualvmTypeOfReach: '',
            virtualMacOfReach: '',
            virtualImageNameOfReach: '',
            virtualNetworkIdOfReach: '',
            virtualSegmentIdOfReach: '',
            virtualSubnetIdOfReach: '',
            vmKeys: [],
            vmValues: [],
            vmIdGroupStatus: [],
            vmGroupStatus: [],
            vmPassword: '',
            vmId_: '',
            updatePasswordLoading: true,
            tableListHeight: '',
            selectValue: '',
            vmAttributeData: [],
            selectTableDataGroup: [],
            btnData: [],
            setTimeClear: '',

            portListPanel: false,
            portTableCloums: [
                {
                    title: 'forwardIP',
                    key: 'forwardIp',
                    align: 'center',
                },
                {
                    title: 'forwardPort',
                    key: 'forwardPort',
                    align: 'center',
                },
                // {
                //     title:'vmName',
                //     key:'name',
                //     align:'center'
                // },
                {
                    title: 'vmIP',
                    key: 'vmIp',
                    align: 'center',
                },
                {
                    title: 'vmPort',
                    key: 'vmPort',
                    align: 'center',
                },

                {
                    title: 'type',
                    key: 'type',
                    align: 'center',
                },
                {
                    title: 'protocal',
                    key: 'protocal',
                    align: 'center',
                },
                {
                    title: 'lastExpireTime',
                    key: 'lastExpireTime',
                    align: 'center',
                },
                {
                    title: 'createName',
                    key: 'userName',
                    align: 'center',
                },
                {
                    title: 'actions',
                    key: 'actions',
                    // align:'center',
                    render: (h, params) => {
                        let _this = this;
                        params = params.row;
                        return h(
                            'Poptip',
                            {
                                style: {},
                                props: {
                                    confirm: true,
                                    title: '您确定要删除吗？',
                                },
                                on: {
                                    'on-ok': () => {
                                        _this.deleteVmPort(params.token);
                                    },
                                    'on-cancel': () => {},
                                },
                            },
                            [
                                h(
                                    'Button',
                                    {
                                        style: {
                                            margin: '5px',
                                        },
                                        props: {
                                            type: 'error',
                                        },
                                    },
                                    '删除'
                                ),
                            ]
                        );
                    },
                },
            ],
            portTableData: [],
            openPort: false,
            addPortLoading: true,
            formValidate: {
                type: 'ssh',
                port: 22,
                protocol: 'tcp',
                customType: 'customType',
            },
            ruleValidate: {
                type: [{ required: true, message: '请选择类型', trigger: 'change' }],
                port: [
                    { required: true, message: '请填写端口', trigger: 'change', type: 'number' },
                ],
                protocol: [{ required: true, message: '请选择协议', trigger: 'change' }],
                customType: [{ required: true, message: '请输入自定义类型', trigger: 'change' }],
            },
            disabledType: false,
            disabledprototol: true,
            accessTokenRef: '',
            setTimeoutReach: '',
            networkData: [],
            subnetData: [],
            segmentsData: [],
            refreshIndex: 0,
            vmNetworkData: [],
            controlSearchBtn: false,
            controlSearchText: '更多',
            controlSearchImage: 'ios-more',
            //接入方式增加选择面板
            selectDataPanel: false,
            selectDataGroup: [],
            selectDataPanelLoading: true,
            accessVmIp: '',
            accessVmId: '',
            accessVmType: '',
            passwordModal: {
                loading: true,
                show: false,
            },
            vmOpModal: {
                loading: true,
                show: false,
                content: '',
            },
            selfRange: {},
            toolDetail:{},
            toolAcountInfo:{
                userName:'',
                password:'',
                name:''
            },
            toolkitOpenTime:1
        };
    },
    created() {
        // this.getDictInfoByName(); // 获取运维配置显示隐藏环境选项
        if (this.batch) {
            this.vmColumnsData.unshift({
                type: 'selection',
                width: 60,
                align: 'center',
                fixed: 'left',
            });
        }
        this.userName = localStorage.nickName;
        this.currentProjectId = this.prjId;
        //      this.tableHeight = $(window).height() - 262 ;

        // this.currentProjectId = 'cd8ced77c2104b8897ad0fd70bfd7dff';
        this.queryAllRange();
        this.getVmListManage();
        // this.getVmAttributeKey();
        this.getProjectInformation();
        this.getToolAccount();
    },
    methods: {
        queryAllRange() {
            queryAllRange().then((res) => {
                console.log(res);
                if (res.code == 1) {
                    let rangelist = res.data.items;
                    this.selfRange = rangelist.find((item) => {
                        if (item.level== 'LOCAL') {
                            return item;
                        }
                    });
                    console.log(this.selfRange, 'this.selfRangethis.selfRange');
                } else {
                    this.$Message.warning(res.message);
                }
            });
        },
        // 批量开关机
        async batchOnOff(flag) {
            let action;
            let message;
            if (flag === 1) {
                // 开机
                action = 'start';
                message = '批量开机';
            } else {
                // 关机
                action = 'stop';
                message = '批量关机';
            }
            const selection = this.$refs['selection1'].getSelection();
            if (selection.length === 0) {
                this.$Message.warning('请选择要操作的虚拟机');
                return;
            }
            let activeFunction = selection.map((element) => {
                let vmId = element.id;
                return new Promise((resolve, reject) => {
                    opVms(vmId, action)
                        .then((data) => {
                            if (data.code == 1) {
                                resolve();
                            } else {
                                reject();
                            }
                        })
                        .catch((error) => {
                            reject();
                        });
                });
            });
            Promise.all(activeFunction)
                .then(() => {
                    this.$Message.info(`${message}成功`);
                    this.getVmListManage();
                })
                .catch((error) => {
                    this.$Message.warning(`${message}失败`);
                });
        },
        changeIpAccess(value) {
            this.accessVmIp = value;
        },
        vmAccessChage() {
            if (!this.accessVmIp) {
                this.$Message.info('请选择一个IP');
                this.selectDataPanelLoading = false;
                this.$nextTick(() => {
                    this.selectDataPanelLoading = true;
                });
                return;
            }
            let _this = this;
            axios({
                url: 'netns/access/' + this.accessVmId + '/' + this.accessVmType,
                method: 'POST',
                data: {
                    ip: this.accessVmIp,
                },
            }).then(function (response) {
                if (response.code == 1) {
                    // var urls = data.attribute.url;
                    _this.accessTokenRef = response.attribute.token;
                    window.openTrain(
                        response.attribute.url +
                            '&Authorization=' +
                            cookieUse.getCookie('desig-token')
                    );
                    _this.selectDataPanelLoading = false;
                    _this.$nextTick(() => {
                        _this.selectDataPanelLoading = true;
                    });
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                    _this.selectDataPanelLoading = false;
                    _this.$nextTick(() => {
                        _this.selectDataPanelLoading = true;
                    });
                }
            });
        },
        controlSearch() {
            if (this.controlSearchBtn) {
                this.controlSearchText = '更多';
                this.controlSearchImage = 'ios-more';
            } else {
                this.controlSearchText = '收起';
                this.controlSearchImage = 'ios-arrow-up';
            }
            this.controlSearchBtn = !this.controlSearchBtn;
        },
        getAccountInfo() {
            let _this = this;
            axios({
                url: '/identity/account/info',
                method: 'get',
            }).then(function (response) {
                if (response.code != '1') {
                    _this.$Message.warning(response.message);
                } else {
                    let data = response.data;
                    _this.oUserName = data.nickname;
                    if (data.avatar) {
                        _this.$refs.img_user.src = data.avatar;
                    }
                }
            });
        },
        openPortPanel() {
            this.$refs['formValidate'].resetFields();
            this.openPort = true;
            this.formValidate.type = 'ssh';
            this.formValidate.port = 22;
            this.formValidate.protocol = 'tcp';
            this.disabledType = false;
        },
        addPort() {
            let _this = this;
            this.$refs['formValidate'].validate((valid) => {
                if (valid) {
                    _this.formValidate.type =
                        _this.formValidate.type == 'other'
                            ? _this.formValidate.customType
                            : _this.formValidate.type;
                    axios({
                        url: '/netns/access/' + _this.vmId_ + '/' + _this.formValidate.type,
                        method: 'post',
                        data: {
                            port: _this.formValidate.port,
                            protocal: _this.formValidate.protocol,
                            enablePortForward: true,
                        },
                    }).then((response) => {
                        if (response.code == 1) {
                            _this.reachVmPortsList(_this.vmId_);
                            _this.openPort = false;
                            _this.addPortLoading = false;
                            _this.$nextTick(() => {
                                _this.addPortLoading = true;
                            });
                        } else {
                            _this.$Message.error(response.prompt || response.message);
                            _this.addPortLoading = false;
                            _this.$nextTick(() => {
                                _this.addPortLoading = true;
                            });
                        }
                    });
                } else {
                    _this.addPortLoading = false;
                    _this.$nextTick(() => {
                        _this.addPortLoading = true;
                    });
                }
            });
        },
        getProjectInformation() {
            let _this = this;
            axios({
                url: 'topo-edit/project/' + _this.currentProjectId,
            }).then(function (response) {
                if (response.code == 1) {
                    _this.projectName = response.attribute.project.projectname;
                } else {
                    let message = response.prompt || response.message;
                    _this.$Message.warning(message);
                }
            });
        },
        cancel() {},
        SaveMetaData() {
            this.updateVmMetadata(this.vmId_);
        },
        removeMetadata(index) {
            this.metadataData.splice(index, 1);
            // alert(index)
        },
        handleAddMetadata() {
            this.metadataData.push({
                key: '',
                value: '',
            });
        },
        switchineVmCurrentPage(currentPage) {
            this.vmCurrentPage = currentPage;
            this.getVmListManage();
            this.selectTableDataGroup = [];
        },
        switchVmItemPage(itemPage) {
            this.vmItemPage = itemPage;
            this.getVmListManage();
            this.selectTableDataGroup = [];
        },
        getVmListManage() {
            this.refreshIndex = 0;
            let _this = this;
            _this.loadingTable = true;
            let params = {
                projectId: _this.currentProjectId,
                pageIndex: _this.vmCurrentPage,
                pageSize: _this.vmItemPage,
                sortBy: 'name',
                order: 'asc',
            };
            if (_this.virtualNameOfReach) {
                params.name = _this.virtualNameOfReach;
            }
            if (_this.virtualSystypeOfReach) {
                params.sysType = _this.virtualSystypeOfReach;
            }
            if (_this.virtualvmTypeOfReach) {
                params.vmType = _this.virtualvmTypeOfReach;
            }
            if (_this.virtualIPOfReach) {
                params.ipAddress = _this.virtualIPOfReach;
            }
            if (_this.subnetId) {
                params.subnetId = _this.subnetId;
            }
            if (_this.equipmentId) {
                params.id = _this.equipmentId;
            }
            if (_this.virtualMacOfReach) {
                params.macAddress = _this.virtualMacOfReach;
            }
            if (_this.virtualImageNameOfReach) {
                params.imageName = _this.virtualImageNameOfReach;
            }
            if (_this.virtualNetworkIdOfReach) {
                params.networkId = _this.virtualNetworkIdOfReach;
            }
            axios({
                url: 'topo-edit/deployed/vms',
                method: 'get',
                params: params,
            }).then(function (response) {
                if (response.code == 1) {
                    _this.vmIdGroupStatus = [];
                    _this.vmTotal = response.data.total;
                    _this.vmListDataTable = response.data.items;
                    // _this.vmListDataTable =  response.data.list.map(item=>{
                    //     item['_loading'] = false;
                    //     return item;
                    // });
                    _this.vmIdGroupStatus = response.data.items.map((item) => {
                        return item.id;
                    });
                    // _this.loadingTable = false
                    if (_this.vmIdGroupStatus.length != 0) {
                        _this.reachManyVmStatus(_this.vmIdGroupStatus);
                    }
                    _this.loadingTable = false;
                } else {
                    if (response.code != -2) {
                        _this.$Message.error(response.message);
                    }
                    _this.loadingTable = false;
                }
            });
        },
        vmAccess(vmId, accessType) {
            let _this = this;
            axios({
                url: 'netns/access/' + vmId + '/' + accessType,
                method: 'POST',
                data: {},
            }).then(function (response) {
                if (response.code == 1) {
                    // var urls = data.attribute.url;
                    _this.accessTokenRef = response.attribute.token;
                    window.openTrain(
                        response.attribute.url +
                            '&Authorization=' +
                            cookieUse.getCookie('desig-token')
                    );
                    _this.loadingTable = false;
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                    _this.loadingTable = false;
                }
            });
        },
        //操作网络
        operationVm(vmId, action, batch) {
            let _this = this;
            return axios({
                url: 'topo-control/servers/' + vmId + '/action/' + action,
                method: 'POST',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.$Message.info('操作成功');
                    if (batch) {
                        // _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                    } else {
                        _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                    }
                } else {
                    let message = response.prompt || response.message;
                    _this.$Message.warning(message);
                }
                _this.vmOpModal.show = false;
            });
        },
        //重置
        rebuildVm(vmId, batch) {
            let _this = this;
            return axios({
                url: 'topo-control/servers/' + vmId + '/action/rebuild',
                method: 'POST',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.$Message.info('操作成功');
                    if (batch) {
                        //    _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                    } else {
                        _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                    }
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                }
                _this.vmOpModal.show = false;
            });
        },
        //重启
        rebootVm(vmId, batch) {
            let _this = this;
            return axios({
                url: 'topo-control/servers/' + vmId + '/action/soft_restart?type=HARD',
                method: 'POST',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.$Message.info('操作成功');
                    if (batch) {
                        // _this.reachManyVmStatusSend(_this.selectTableDataGroup.map(item=>{return item.id}))
                    } else {
                        _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
                    }
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                }
                _this.vmOpModal.show = false;
            });
        },
        vmSwitchTypeOp() {
            let vmId = this.opVm.id;
            let text = this.opVmType;
            let batch = '';
            let _this = this;
            switch (text) {
                case '关机':
                    _this.operationVm(vmId, 'stop', batch);
                    break;
                case '开机':
                    _this.operationVm(vmId, 'start', batch);
                    break;
                case '重置状态':
                    _this.operationVm(vmId, 'reset-state-active', batch);
                    break;
                case '重启':
                    _this.rebootVm(vmId, batch);
                    break;
                case '重置':
                    _this.rebuildVm(vmId, batch);
                    break;
                case '挂起':
                    _this.operationVm(vmId, 'suspend', batch);
                    break;
                case '暂停':
                    _this.operationVm(vmId, 'pause', batch);
                    break;
                case '恢复':
                    _this.operationVm(vmId, 'resume', batch);
                    break;
                case '取消暂停':
                    _this.operationVm(vmId, 'unpause', batch);
                    break;
            }
        },
        vmSwitchTypeOperation(vmId, text, params = '', batch = '') {
            let _this = this;
            switch (text) {
                case '关机':
                    _this.operationVm(vmId, 'stop', batch);
                    break;
                case '开机':
                    _this.operationVm(vmId, 'start', batch);
                    break;
                case '重置状态':
                    _this.operationVm(vmId, 'reset-state-active', batch);
                    break;
                case '重启':
                    _this.rebootVm(vmId, batch);
                    break;
                case '重置':
                    _this.rebuildVm(vmId, batch);
                    break;
                case '挂起':
                    _this.operationVm(vmId, 'suspend', batch);
                    break;
                case '暂停':
                    _this.operationVm(vmId, 'pause', batch);
                    break;
                case '恢复':
                    _this.operationVm(vmId, 'resume', batch);
                    break;
                case '取消暂停':
                    _this.operationVm(vmId, 'unpause', batch);
                    break;
                case '密码':
                    _this.vmId_ = params.id;
                    _this.vmPassword = '';
                    this.currentVm = params;
                    _this.passwordModal.show = true;
                    return;
                case '元数据':
                    _this.vmMetadata = true;

                    _this.metadataData = [
                        {
                            key: '',
                            value: '',
                        },
                    ];
                    _this.reachVmMetaData(params.id);
                    _this.vmName = params.name;
                    _this.vmId_ = params.id;
                    break;
                case '端口转发':
                    _this.vmName = params.name;
                    _this.vmId_ = params.id;
                    _this.portTableData = [];
                    _this.portListPanel = true;
                    _this.reachVmPortsList(params.id);
                    break;
                case '工具库':
                    _this.vmName = params.name;
                    _this.vmId_ = params.id;
                    _this.currentSubnetId = params.addresses[0].ips[0].subnetId;
                    _this.toolModal = true;
                    _this.getToolTunnelDetail();
                default:
                    break;
            }
        },
        //查询虚拟机的状态
        reachVmStatus(vmId) {
            let _this = this;
            axios({
                url: 'topo-control/servers/' + vmId + '/status',
            }).then(function (response) {
                if (response.code == 1) {
                    if (response.list[0].taskStatus != 'null') {
                        _this.reachVmStatus(vmId);
                    } else {
                        _this.getVmListManage();
                        // var status = response.list[0].status;
                    }
                } else {
                    if (response.message) {
                        _this.$Message.error({
                            content: response.message,
                            closable: true,
                            duration: 10,
                        });
                    } else {
                        _this.$Message.error({
                            content: response.prompt || response.message,
                            closable: true,
                            duration: 10,
                        });
                    }
                }
            });
        },
        //批量查询虚拟机状态
        reachManyVmStatus(vmIdGroup) {
            let _this = this;
            axios({
                url: 'topo-control/servers/batch_status',
                method: 'POST',
                data: vmIdGroup,
            }).then(function (response) {
                if (response.code == 1) {
                    let status_null = [];
                    let vm_status = '',
                        vm_loading = false;
                    _this.vmGroupStatus = response.list.map((item) => {
                        if (item.taskStatus != 'null') {
                            status_null.push(item.vmId);
                            vm_status = item.taskStatus;
                            vm_loading = true;
                        } else {
                            vm_status = item.status;
                            vm_loading = false;
                        }
                        return {
                            id: item.vmId,
                            status: vm_status,
                            loading: vm_loading,
                            enableCrash: item.enableCrash,
                            crashMsg: item.crashMsg ? item.crashMsg : '',
                        };
                    });
                    if (status_null.length != 0) {
                        _this.reachManyVmStatusSend(status_null);
                    }
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        reachManyVmStatusSend(vmIdGroup) {
            let _this = this;
            clearTimeout(_this.setTimeClear);
            axios({
                url: 'topo-control/servers/batch_status',
                method: 'POST',
                data: vmIdGroup,
            }).then(function (response) {
                if (response.code == 1) {
                    let status_null = [];
                    let status_new = [];
                    let vm_status = '';
                    status_new = response.list.map((item) => {
                        if (item.taskStatus != 'null') {
                            status_null.push(item.vmId);
                            vm_status = item.taskStatus;
                            // return
                        } else {
                            vm_status = item.status;
                        }
                        return {
                            id: item.vmId,
                            status: vm_status,
                        };
                    });
                    _this.vmGroupStatus.forEach((item) => {
                        status_new.forEach((element) => {
                            if (item.id == element.id) {
                                item.status = element.status;
                            }
                        });
                    });
                    if (status_null.length != 0) {
                        _this.setTimeClear = setTimeout(() => {
                            _this.reachManyVmStatusSend(status_null);
                        }, 3000);
                    }
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        //批量修改生成随机密码
        updateVmPasswordMany(ele) {
            let _this = this;
            let access = ele.accesses[0];
            let data = {
                id: ele.id,
                password: _this.getRandomPassword(6),
                type: access.accessType,
                username: access.username,
            };
            return axios({
                url: 'topo-control/servers/' + ele.id + '/change-password',
                method: 'post',
                data: data,
            }).then(function (response) {
                if (response.code == 1) {
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        getRandomPassword(range) {
            let str = '',
                // range = 6,
                arr = [
                    'a',
                    'b',
                    'c',
                    'd',
                    'e',
                    'f',
                    'g',
                    'h',
                    'i',
                    'j',
                    'k',
                    'l',
                    'm',
                    'n',
                    'o',
                    'p',
                    'q',
                    'r',
                    's',
                    't',
                    'u',
                    'v',
                    'w',
                    'x',
                    'y',
                    'z',
                    'A',
                    'B',
                    'C',
                    'D',
                    'E',
                    'F',
                    'G',
                    'H',
                    'I',
                    'J',
                    'K',
                    'L',
                    'M',
                    'N',
                    'O',
                    'P',
                    'Q',
                    'R',
                    'S',
                    'T',
                    'U',
                    'V',
                    'W',
                    'X',
                    'Y',
                    'Z',
                    '0',
                    '1',
                    '2',
                    '3',
                    '4',
                    '5',
                    '6',
                    '7',
                    '8',
                    '9',
                ];
            // if (randomFlag) {
            //     range = Math.round(Math.random() * (max - min)) + min;// 任意长度
            // }
            for (let i = 0; i < range; i++) {
                let pos = Math.round(Math.random() * (arr.length - 1));
                str += arr[pos];
            }
            return str;
        },
        reachVmMetaData(vmId) {
            let _this = this;
            axios({
                url: 'topo-control/servers/' + vmId + '/metadata',
                method: 'get',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.metadataData = [];
                    let metadata_ = response.attribute.metadata;
                    if (JSON.stringify(metadata_) == '{}') {
                        _this.metadataData.push({
                            key: '',
                            value: '',
                        });
                    } else {
                        for (let i in metadata_) {
                            _this.metadataData.push({
                                key: i,
                                value: metadata_[i],
                            });
                        }
                    }
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        duration: 10,
                        closable: true,
                    });
                }
            });
        },
        updateVmMetadata(vmId) {
            let _this = this;
            let objMedata = {};
            _this.metadataData.forEach((element) => {
                objMedata[element.key] = element.value;
            });
            axios({
                url: 'topo-control/servers/' + vmId + '/metadata',
                method: 'put',
                data: objMedata,
            }).then(function (response) {
                if (response.code == 1) {
                    _this.$Message.success('保存成功');
                    _this.vmMetadata = false;
                    _this.vmMetadataLoading = false;
                    _this.$nextTick(() => {
                        _this.vmMetadataLoading = true;
                    });
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                    _this.vmMetadataLoading = false;
                    _this.$nextTick(() => {
                        _this.vmMetadataLoading = true;
                    });
                }
            });
        },
        deleteVmMetadata(vmId, key) {
            let _this = this;
            axios({
                url: 'topo-control/servers/' + vmId + '/metadata/' + key,
                method: 'delete',
            }).then(function (response) {
                if (response.code == 1) {
                    // _this.
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        //查询虚拟机的key
        getVmAttributeKey(value) {
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                url: 'topo-edit/topo/' + _this.currentProjectId + '/attribute/tree?type=VM',
            }).then(function (response) {
                if (response.code == 1) {
                    // _this.vmKeys = []
                    if (response.attribute.result != '{}') {
                        _this.vmAttributeData = Object.keys(response.attribute.result).map(
                            (item) => {
                                let oneMenu = [
                                    {
                                        label: '--',
                                        value: '--',
                                    },
                                ];
                                // $.ajax({
                                //     type:"get",
                                //     contentType:"application/json",
                                //     async:false,
                                //     url: _projPath+'topo-edit/'+_this.currentProjectId+"/attribute/key/"+item,
                                //     dataType:"json",
                                //     headers:{"Authorization":localStorage.token},
                                //     success: function (response) {
                                //  	    if(response.attribute.result.length!=0){
                                //             oneMenu = response.attribute.result.map(item=>{
                                //                 return{
                                //                     value:item,
                                //                     label:'value：'+item
                                //                 }
                                //             });
                                //         }
                                //     },
                                //     error: function () {
                                //     },
                                // });
                                return {
                                    value: item,
                                    label: 'key：' + item,
                                    children: oneMenu,
                                };
                            }
                        );
                    }
                } else {
                    if (response.code != -2) {
                        _this.$Message.error({
                            content: response.prompt || response.message,
                            closable: true,
                            duration: 10,
                        });
                    }
                }
            });
        },
        //通过key 查找value
        getValueByVmKey(vmAttributeKey) {
            let _this = this;
            _this.vmValues = [];
            _this.virtualValueOfReach = '';
            if (!vmAttributeKey) {
                return;
            }
            axios({
                url: 'topo-edit/topo/' + _this.currentProjectId + '/attribute/key/' + vmAttributeKey,
            }).then(function (response) {
                if (response.code == 1) {
                    if (response.attribute.result.length != 0) {
                        _this.vmValues = response.attribute.result;
                    }
                } else {
                    _this.$Message.error({
                        content: response.prompt || response.message,
                        closable: true,
                        duration: 10,
                    });
                }
            });
        },
        listenKeyChange(vmAttributeKey) {
            let _this = this;
            // _this.vmValues = [];
            // _this.virtualValueOfReach = "";
            if (!vmAttributeKey) {
                _this.virtualKeyOfReach = '';
                _this.virtualValueOfReach = '';
                return;
            } else {
                if (vmAttributeKey.length == 1) {
                    _this.virtualKeyOfReach = vmAttributeKey[0];
                    _this.virtualValueOfReach = '';
                    axios({
                        url:
                            'topo-edit/topo/' +
                            _this.currentProjectId +
                            '/attribute/key/' +
                            vmAttributeKey[0],
                    }).then(function (response) {
                        if (response.code == 1) {
                            if (response.attribute.result.length != 0) {
                                // _this.vmValues = response.attribute.result;
                                for (let i = 0; i < _this.vmAttributeData.length; i++) {
                                    if (_this.vmAttributeData[i].value == vmAttributeKey[0]) {
                                        _this.vmAttributeData[i].children = [];
                                        response.attribute.result.forEach((element) => {
                                            _this.vmAttributeData[i].children.push({
                                                label: 'value：' + element,
                                                value: element,
                                            });
                                        });
                                        return;
                                    }
                                }
                            }
                        } else {
                            _this.$Message.error({
                                content: response.prompt || response.message,
                                closable: true,
                                duration: 10,
                            });
                        }
                    });
                } else {
                    _this.virtualKeyOfReach = vmAttributeKey[0];
                    _this.virtualValueOfReach = vmAttributeKey[1];
                }
            }
            _this.vmCurrentPage = 1;
            _this.getVmListManage();
            // axios({
            //     url:'topo-edit/topo/'+_this.currentProjectId+'/attribute/key/'+vmAttributeKey,
            // }).then(function(response){
            //     if(response.code==1){
            //         if(response.attribute.result.length!=0){
            //             // _this.vmAttributeData.forEach(element=>{
            //             //     if(){

            //             //     }
            //             // });
            //             for(let i=0;i<_this.vmAttributeData.length;i++){
            //                 if(_this.vmAttributeData[i].value==vmAttributeKey){
            //                     _this.vmAttributeData[i]['children'] = response.attribute.result.map(item=>{
            //                         return {
            //                             label:item,
            //                             value:item
            //                         }
            //                     });
            //                     return;
            //                 }
            //             }
            //         }
            //     }else{
            //         _this.$Message.error({content:response.prompt || response.message,closable:true,duration:10})
            //     }
            // })
        },
        opeartionManyVm() {
            let _this = this;
            if (this.selectTableDataGroup.length != 0) {
                // _this.isSpinShow = true
                _this.loadingTable = true;
                // let vmGroupStatus = this.selectTableDataGroup.map(item=>{
                //     return item.status;
                // });
                let vmGroupStatus = [];
                axios({
                    url: 'topo-control/servers/batch_status',
                    method: 'POST',
                    data: _this.selectTableDataGroup.map((item) => {
                        return item.id;
                    }),
                })
                    .then(function (response) {
                        if (response.code == 1) {
                            let vm_status = '';
                            return (vmGroupStatus = response.list.map((item) => {
                                if (item.taskStatus != 'null') {
                                    vm_status = item.taskStatus;
                                } else {
                                    vm_status = item.status;
                                }
                                return vm_status;
                            }));
                        } else {
                            _this.loadingTable = false;
                            _this.$Message.error({
                                content: response.prompt || response.message,
                                closable: true,
                                duration: 10,
                            });
                        }
                    })
                    .then(function (vmGroupStatus) {
                        _this.vmManyNumber = vmGroupStatus.length;
                        // vmGroupStatus = new Set(vmGroupStatus);
                        let uniqueArr = [...new Set(vmGroupStatus)];
                        _this.loadingTable = false;
                        if (uniqueArr.length != 1) {
                            _this.$Message.info('您选择的虚拟机中，存在不同状态的虚拟机');
                        } else {
                            _this.vmManyPanel = true;
                            switch (uniqueArr[0]) {
                                case 'ACTIVE':
                                    _this.btnData = [
                                        '关机',
                                        '重启',
                                        '重置',
                                        '挂起',
                                        '暂停',
                                        '修改密码(系统随机生成)',
                                    ];
                                    break;
                                case 'Running':
                                    _this.btnData = [
                                        '关机',
                                        '重启',
                                        '重置',
                                        '挂起',
                                        '暂停',
                                        '修改密码(系统随机生成)',
                                    ];
                                    break;
                                case 'SHUTOFF':
                                    _this.btnData = ['开机', '重置'];
                                    break;
                                case 'DOWN':
                                    _this.btnData = ['开机', '重置'];
                                    break;
                                case 'Stopped':
                                    _this.btnData = ['开机', '重置'];
                                    break;
                                case 'SUSPENDED':
                                    _this.btnData = ['恢复'];
                                    break;
                                case 'ERROR':
                                    _this.btnData = ['重启', '重置状态'];
                                    break;
                                case 'PAUSED':
                                    _this.btnData = ['取消暂停'];
                                    break;
                                case 'CRUSH': //虚拟机奔溃状态
                                    _this.btnData = ['关机', '重启'];
                                    break;
                                case 'UNKNOWN': //虚拟机未知状态
                                    _this.btnData = [];
                                    break;
                                default:
                                    break;
                            }
                        }
                    });
            } else {
                _this.$Message.info('请选择要操作的虚拟机');
            }
        },
        selectTableData(values) {
            this.selectTableDataGroup = values;
        },
        testFgm(value) {
            this.selectTableDataGroup.forEach((element) => {
                this.vmSwitchTypeOperation(element.id, value, '', true);
            });
        },
        okVm(value) {
            let _this = this;
            let activeFunction = [];
            activeFunction = this.selectTableDataGroup.map((element) => {
                let vmId = element.id;
                let batch = true;
                return new Promise((resolve, reject) => {
                    switch (value) {
                        case '关机':
                            _this.operationVm(vmId, 'stop', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '开机':
                            _this.operationVm(vmId, 'start', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '重启':
                            _this.rebootVm(vmId, batch).then(() => {
                                resolve();
                            });
                            break;
                        case '重置':
                            _this.rebuildVm(vmId, batch).then(() => {
                                resolve();
                            });
                            break;
                        case '挂起':
                            _this.operationVm(vmId, 'suspend', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '暂停':
                            _this.operationVm(vmId, 'pause', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '恢复':
                            _this.operationVm(vmId, 'resume', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '取消暂停':
                            _this.operationVm(vmId, 'unpause', batch).then(() => {
                                resolve();
                            });
                            break;
                        case '修改密码(系统随机生成)':
                            _this.updateVmPasswordMany(element).then(() => {
                                resolve();
                            });
                            // _this.operationVm(vmId,'unpause',batch).then(()=>{
                            //     resolve()
                            // })
                            break;
                        default:
                            break;
                    }
                });
                // return this.vmSwitchTypeOperation(element.id,value,'',true)
            });
            // setTimeout(() => {
            //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
            // }, 1500);
            this.vmManyPanel = false;
            Promise.all(activeFunction).then(() => {
                _this.getVmListManage();
                // _this.reachManyVmStatusSend(_this.vmIdGroupStatus);
            });
            return;
            // let promise = new Promise(()=>{

            // }).then((value)=>{

            // })
            // let _this = this;
            // let group = [];
            // group = this.selectTableDataGroup.map(element=>{
            //     return _this.vmSwitchTypeOperation(element.id,value,'',true)
            // });
            // let promise = new Promise((resolve, reject) => {
            //     // let i = 0;
            //     this.selectTableDataGroup.forEach((element,index)=>{
            //         // group.push(this.vmSwitchTypeOperation(element.id,value,'',true));
            //         this.vmSwitchTypeOperation(element.id,value,'',true)
            //         // i++;
            //     });

            //     resolve();
            //     // if(i==this.selectTableDataGroup.length){
            //     //     resolve();
            //     // }
            // });
            // promise.then((value) => {
            //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
            // }).then(()=>{
            //     this.vmManyPanel = false;
            // });
            // promise.then((value) => {
            //     this.reachManyVmStatusSend(this.vmIdGroupStatus);
            // }).then(()=>{
            //     this.vmManyPanel = false;
            // });
            // this.reachManyVmStatusSend(this.selectTableDataGroup.map(item=>{return item.id}));
            //    setTimeout(() => {

            //    }, 2000);
        },
        test(value) {},
        reachVmPortsList(vmId) {
            let _this = this;
            _this.portTableData = [];
            return axios({
                url: 'netns/access/detail?vmId=' + vmId,
                method: 'get',
                // params:{
                //     vmId:vmId
                // }
            }).then((response) => {
                if (response.code == 1) {
                    // return response.attribute.result
                    response.attribute.result.pageData.forEach(function (item,i) {
                        if (item.forwardIp) {
                            _this.portTableData.push(item);
                        }
                    });
                    // _this.portTableData = response.attribute.result.pageData.filter((item)=>{
                    //     return item.forwardIP;
                    // });
                } else if (response.code == -2) {
                    _this.portTableData = [];
                } else {
                    _this.$Message.error(response.prompt || response.message);
                }
            });
        },
        deleteVmPort(token) {
            let _this = this;
            axios({
                url: '/netns/access/tokens/' + token,
                method: 'delete',
            }).then((response) => {
                if (response.code == 1) {
                    _this.reachVmPortsList(this.vmId_);
                } else {
                    _this.$Message.error(response.prompt || response.message);
                }
            });
        },
        listenTypeChange(value) {
            let _this = this;
            _this.disabledprototol = true;
            _this.disabledType = true;
            switch (value) {
                case 'ssh':
                    _this.formValidate.port = 22;
                    _this.formValidate.protocol = 'tcp';
                    _this.disabledType = false;
                    _this.formValidate.customType = 'test';
                    break;
                case 'rdp':
                    _this.formValidate.port = 3389;
                    _this.formValidate.protocol = 'tcp';
                    _this.disabledType = false;
                    _this.formValidate.customType = 'test';
                    break;
                case 'console':
                    _this.formValidate.port = 5901;
                    _this.formValidate.protocol = 'tcp';
                    _this.disabledType = false;
                    _this.formValidate.customType = 'test';
                    break;
                case 'other':
                    // _this.formValidate.port = 22
                    _this.disabledprototol = false;
                    _this.disabledType = true;
                    _this.formValidate.port = 1;
                    _this.formValidate.customType = '';
                    break;
                default:
                    break;
            }
        },
        deleteAccessAisle(vmId) {
            let _this = this;
            axios({
                url: 'netns/access/vms/' + vmId,
                method: 'delete',
            }).then((response) => {
                if (response.code == 1) {
                    _this.$Message.success('刷新成功');
                    _this.loadingTable = false;
                } else {
                    _this.$Message.warning(response.prompt || response.message);
                    _this.loadingTable = false;
                }
            });
        },
        limitingReach() {
            let _this = this;
            clearTimeout(_this.setTimeoutReach);
            _this.setTimeoutReach = setTimeout(() => {
                _this.getVmListManage();
            }, 500);
        },
        reachNetworkList(value) {
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                url: 'topo-edit/topo/project/' + _this.currentProjectId + '/tree',
                method: 'GET',
                data: 'NW',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.networkData = [];
                    let networkDataTree = response.data;
                    function getNetwork(currentNetworkData) {
                        _this.networkData.push({
                            networkName: currentNetworkData.name,
                            networkId: currentNetworkData.id,
                        });
                        if (
                            currentNetworkData.networks &&
                            currentNetworkData.networks.length != 0
                        ) {
                            for (let i = 0; i < currentNetworkData.networks.length; i++) {
                                getNetwork(currentNetworkData.networks[i]);
                            }
                        }
                    }
                    getNetwork(networkDataTree);
                } else {
                    _this.$Message.error(response.prompt || response.message);
                }
            });
        },
        reachSubnetList(value) {
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                //              url:'deploy/project/subnets?projectId='+_this.currentProjectId+'&page=1&rows=20000',
                url:
                    `topo-edit/deployed/projects/${_this.currentProjectId}/subnets` +
                    '&pageIndex=1&pageSize=20000',
                method: 'GET',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.subnetData = response.data.items;
                } else {
                    _this.$Message.error(response.prompt || response.message);
                }
            });
        },
        reachSegmentList(value) {
            if (!value) {
                return;
            }
            let _this = this;
            axios({
                //              url:'deploy/project/segments?projectId='+_this.currentProjectId+'&page=1&rows=20000',
                url:
                    `topo-edit/deployed/projects/${_this.currentProjectId}/segments` +
                    '&pageIndex=1&pageSize=20000',
                method: 'GET',
            }).then(function (response) {
                if (response.code == 1) {
                    _this.segmentsData = response.data.items;
                } else {
                    _this.$Message.error(response.prompt || response.message);
                }
            });
        },
        changePassword() {
            let _this = this;
            if (!_this.vmPassword) {
                _this.$Message.info('请填写密码');
                _this.loading = false;
                _this.passwordModal.loading = false;
                setTimeout(() => {
                    _this.passwordModal.loading = true;
                }, 500);
                return;
            }
            console.log(this.currentVm);
            let myPromis =
                this.cloudType !== 'h3c'
                    ? axios({
                          url: `topo-control/servers/${_this.vmId_}/admin-password?pwd=${_this.vmPassword}`,
                          method: 'put',
                      })
                    : axios({
                          url: 'topo-control/servers/' + this.currentVm.id + '/change-password',
                          method: 'post',
                          data: {
                              id: this.currentVm.id,
                              password: this.vmPassword,
                              type: 'qga',
                              username: this.currentVm.accesses[0].username,
                          },
                      });
            myPromis
                .then(function (response) {
                    if (response.code == 1) {
                        _this.$Message.success('修改成功');
                        _this.getVmListManage();
                        _this.passwordModal.show = false;
                    } else {
                        _this.$Message.error({
                            content: response.prompt || response.message,
                            closable: true,
                            duration: 10,
                        });
                    }
                    _this.passwordModal.loading = false;
                    setTimeout(() => {
                        _this.passwordModal.loading = true;
                    }, 500);
                })
                .catch((error) => {
                    _this.passwordModal.loading = false;
                    setTimeout(() => {
                        _this.passwordModal.loading = true;
                    }, 500);
                });
        },
        getoption() {
            let arr = [];
            if (!this.optionConfig.show) return arr;
            //    let optionConfig = this.optionConfig.env
            if (this.optionConfig.env.metaData == 1) {
                // 0 去除元数据
                arr.push('元数据');
            }
            if (this.optionConfig.env.migrate == 1) {
                // 迁移
                arr.push('迁移');
            }
            if (this.optionConfig.env.portForward == 1) {
                //端口转发
                arr.push('端口转发');
            }
            return arr;
        },
        getDictInfoByName(){
            return new Promise((resolve,reject) => {
                getDictInfoByName({name:'toolkitOpenTime'}).then(({code,attribute:data,message}) => {
                    if(code === 1){
                        this.toolkitOpenTime = data.data.value || 1;
                        resolve(data.data.value)
                    }else{
                        resolve()
                    }
                }).catch(error => {
                    resolve()
                })
            })
        },
        getToolTunnelDetail(){
            return new Promise((resolve,reject) => {
                getToolTunnelDetail(this.prjId,this.currentSubnetId).then(({code,data,message}) => {
                    if(code === 1){
                        this.toolDetail = data;
                        let toolUrl = '';
                        if(data && data.deviceData && data.deviceData.length > 0){
                            let message = data.deviceData[0].message;
                            if(message && message.indexOf('->') != -1){
                                toolUrl = message && message.split('->')[1].split(':')[0]
                                toolUrl = `http://${toolUrl.trim()}/toolkit/#/login`
                            }
                            this.toolDetail.toolUrl = toolUrl;
                        }
                        resolve(this.toolDetail)
                    }else{

                    }
                }).catch(error => {
                    console.log(error);
                })
            })
        },
        //获取当前用户工具库账号
        getToolAccount(){
            return new Promise((resolve,reject) => {
                getToolAccount().then(({code,data,message}) => {
                    if(code === 1){
                        this.toolAcountInfo = data;
                        if(this.toolAcountInfo.status === 2){
                            this.timeout = setTimeout(() => {
                                this.getToolAccount()
                            },5000)
                        }else{
                            clearTimeout(this.timeout)
                        }
                    }else{

                    }
                    resolve()
                })
            })
        },
        opTool(type){
            let reqApi = type === 'start' ? startToolTunnel :  stopToolTunnel;
            reqApi(this.prjId,this.currentSubnetId).then(async ({code,data,message}) => {
                if(code === 1){
                    this.$Message.info(`${type === 'start' ? '启动' : '关闭'}成功`)
                    this.getToolTunnelDetail();
                    if(['closing','starting','initialized'].includes(this.toolDetail.status)){
                        this.toolIntervel = setInterval(() => {
                            this.getToolTunnelDetail();
                        },3000)
                    }else{
                        clearInterval(this.toolIntervel)
                    }
                    // setTimeout(() => {
                    //     this.toolModal = false
                    // },5000)
                    // toolUrl && this.$Message.info({
                    //     content:'工具库地址：'+toolUrl,
                    //     duration: 5,
                    //     closable: true
                    // })
                }else{
                    this.$Message.error(message);
                }
            }).catch(error => {
                console.log(error);
            })
        },
        filterToolStatus(){
            if(this.toolDetail.status === 'running'){
                return '开启'
            }else if(!this.toolDetail || !this.toolDetail.status || this.toolDetail.status === 'completed'){
                return '关闭'
            }else{
                return this.filterTaskStatus(this.toolDetail.status)
            }
        }
    },
    beforeCreate() {},
    // created(){
    // },
    beforeMount() {},
    mounted() {
        this.getDictInfoByName();
        // this.tableListHeight = $('#vmListTable').height();
    },
    beforeUpdate() {},
    updated() {
        // this.tableListHeight = $('#vmListTable').height();
        // if($('#vmListTable').height()>$(window).height() - 140){
        //     this.tableHeight = $(window).height() - 140
        // }else{
        //     // this.tableHeight = ''
        // }
    },
    beforeDestroy() {
        clearInterval(this.toolIntervel)
    },
    destroyed() {},
    watch: {
        vmListDataTable: {
            handler(newName, oldName) {},
            immediate: true,
        },
    },
};
</script>

<style>
/* .header{
      width: 100%;
      height: 50px;
      color:#fff;
      background: #4a5a6a;
  }
  .leftP{
      width: 300px;
      line-height: 50px;
      text-align: left;
      padding-left: 20px;
  }
  .rightU{
      width: 300px;
      line-height: 50px;
      text-align: right;
      padding-right: 20px;
  }
  .img_user{
      vertical-align: text-bottom;
      margin-left: 20px;
  } */

.headerBtn1 {
    text-align: left;
    margin: 15px 0;
}
.pageStyle1 {
    text-align: center;
    margin-top: 10px;
}

.operation .ivu-select-arrow {
    right: 2px;
}
.operation .ivu-select-selection {
    border-radius: 0px 4px 4px 0px !important;
}
.accessType .ivu-select-arrow {
    right: 2px;
}
.accessType .ivu-select-selection {
    border-radius: 0px 4px 4px 0px !important;
}
.opertionVm .ivu-select-arrow {
    right: 2px;
}
.opertionVm .ivu-select-selection {
    border-radius: 0px 4px 4px 0px !important;
}
.ivu-tag-border.ivu-tag-closable .ivu-icon-ios-close {
    top: -2px;
}
.ivu-table-tip {
    overflow: hidden !important;
}

.expendSpanStyle {
    display: inline-block;
    margin-right: 25px;
    min-width: 300px;
}

#vmListTable .ivu-table-overflowX {
    overflow: auto;
}
#vmListTable .ivu-table-overflowX::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.vm-op-wrap .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
    visibility: hidden;
}
/* .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
     from { transform: rotate(0deg);}
     50% { transform: rotate(180deg);}
     to { transform: rotate(360deg);}
  } */
/* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
/* .ivu-spin-fix {
      position: fixed;
  } */
</style>
